import React, {Component} from 'react';
import Detail from "./Detail";
import {Link, Route, Switch} from "react-router-dom";

class Message extends Component {
    state = {
        messages: [
            {id: '1', title: '消息1'},
            {id: '2', title: '消息2'},
            {id: '3', title: '消息3'}
        ]
    }

    render() {
        return (
            <div>
                <div className="panel panel-default">
                    <div className="panel-body">
                        <div className="list-group">
                            {
                                this.state.messages.map((msg) => {
                                    return (
                                        /*向路由携带params参数*/
                                        <Link to={`/home/message/detail/${msg.id}/${msg.title}`} key={msg.id}>
                                            <h4 className="list-group-item-heading">{msg.title}</h4>
                                        </Link>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
                {/*注册路由*/}
                <Switch>
                    {/*声明路由接收参数*/}
                    <Route path="/home/message/detail/:id/:title" component={Detail}/>
                </Switch>
            </div>
        );
    }
}

export default Message;